<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">

        <div class="main-container">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">主要信息</li>
                            <li>商品详情</li>
                            <li>销售设置</li>
                            <li>规格属性</li>
                        </ul>
                        <div class="layui-tab-content">

                            <div class="layui-tab-item layui-show" style="padding-top: 30px;padding-bottom: 50px;">
                                

<div class="layui-form-item">
    <label class="layui-form-label">名称：</label>
    <div class="layui-input-block">
        <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入商品名称" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">编码：</label>
    <div class="layui-input-block">
        <input type="text" name="code" lay-verify="required" autocomplete="off" placeholder="请输入商品编码" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">价格：</label>
    <div class="layui-inline">
        <input type="number" name="price" lay-verify="required" value="0.00" autocomplete="off" placeholder="请输入商品编码" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">库存：</label>
    <div class="layui-inline">
        <input type="number" name="number" lay-verify="required" value="50" autocomplete="off" placeholder="库存" class="layui-input">
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">商品分类：</label>
    <div class="layui-input-inline">
        <select name="first_category_id" lay-filter="first_category" lay-verify="custom_required"
                lay-verType="tips" switch-tab="0" verify-msg="请选择分类">
            <option value="">请选择分类</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <select name="second_category_id" lay-filter="second_category" lay-verify="custom_required"
                lay-verType="tips" switch-tab="0" verify-msg="请选择分类">
            <option value="">请选择分类</option>
        </select>
    </div>
    <div class="layui-input-inline">
        <select name="third_category_id" lay-filter="third_category" lay-verify="custom_required"
                lay-verType="tips" switch-tab="0" verify-msg="请选择分类" lay-filter="first_category">
            <option value="">请选择分类</option>
        </select>
    </div>
</div>

<div class="layui-form-item" style="margin-bottom: 0px">
    <label class="layui-form-label">商品主图：</label>
    <div class="layui-inline">
        <div class="layui-upload">
          <button type="button" class="layui-btn" id="test1">上传图片</button>
          <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
            <p id="demoText"></p>
          </div>
        </div> 
    </div>
</div>

<div class="layui-form-item" style="margin-bottom: 0px">
    <label class="layui-form-label">商品相册：</label>
    <div class="layui-inline">

        <div class="layui-upload">
          <button type="button" class="layui-btn" id="test2">多图片上传</button> 
          <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
         </blockquote>
        </div>

    </div>
</div>

                            </div>
                            <!-- 详情容器 -->
                            <div class="layui-tab-item" style="padding-top: 30px;padding-bottom: 50px;">

<div class="layui-form-item">
    <label class="layui-form-label">内容</label>
    <div class="layui-input-block">
        <textarea name="content" id="content" style="min-height:300px;width: 100%"></textarea>
    </div>
</div>
                                
                            </div>
                            <!-- 销售属性容器 -->
                            <div class="layui-tab-item">
<div class="layui-form-item">
    <label class="layui-form-label">虚拟销量：</label>
    <div class="layui-input-inline">
        <input type="text" name="virtual_sales_sum" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">库存预警：</label>
    <div class="layui-input-inline">
        <input type="text" name="stock_warn" autocomplete="off" class="layui-input">
    </div>
</div>
<div class="layui-form-item"><label class="layui-form-label"></label><span style="color: #a3a3a3;font-size: 9px">设置最低库存预警值，当库存低于预警值时会出现在库存预警商品列表页，0为不预警。</span></div>
<div class="layui-form-item">
    <label class="layui-form-label">库存显示：</label>
    <div class="layui-input-block">
        <input type="radio" name="is_show_stock" value="1" title="显示" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i><div>显示</div></div>
        <input type="radio" name="is_show_stock" value="0" title="不显示"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>不显示</div></div>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">快递运费：</label>
    <div class="layui-input-inline">
        <input type="radio" name="free_shipping_type" value="1" title="包邮" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon layui-anim-scaleSpring"></i><div>包邮</div></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline" style="margin-right: 0px;width: auto">
            <input type="radio" name="free_shipping_type" value="2" title="统一运费"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>统一运费</div></div>
        </div>
        <div class="layui-input-inline" style="width: 110px">
            <input type="number" name="free_shipping" class="layui-input">
        </div>
        <div class="unit-tips">元</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline" style="margin-right: 0px;width: auto">
            <input type="radio" name="free_shipping_type" value="3" title="运费模板"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>运费模板</div></div>
        </div>
        <div class="layui-input-inline" style="width: 110px">
            <select name="free_shipping_template_id"><option value="">请选择运费模板</option></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择运费模板" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit" style=""><dd lay-value="" class="layui-select-tips layui-this">请选择运费模板</dd></dl></div>
        </div>

    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">商品标签：</label>
    <div class="layui-input-inline">
        <input type="checkbox" name="is_new" lay-skin="primary" title="新品推荐"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>新品推荐</span><i class="layui-icon layui-icon-ok"></i></div>
        <input type="checkbox" name="is_best" lay-skin="primary" title="好物优选"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>好物优选</span><i class="layui-icon layui-icon-ok"></i></div>
        <input type="checkbox" name="is_like" lay-skin="primary" title="猜你喜欢"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>猜你喜欢</span><i class="layui-icon layui-icon-ok"></i></div>
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label"><span class="form-label-asterisk">*</span>销售状态：</label>
    <div class="layui-input-block">
        <input type="radio" name="status" value="1" title="立即上架" verify-msg="选择销售状态" lay-verify="status"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>立即上架</div></div>
        <input type="radio" name="status" value="0" title="放入仓库" verify-msg="选择销售状态" lay-verify="status" checked=""><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>放入仓库</div></div>
    </div>
</div>
                            </div>
                            <!-- 属性规格容器 -->
                            <div class="layui-tab-item" style="padding-top: 30px;padding-bottom: 50px;">
<!--form项目开始-->
<div class="layui-form-item">
    <label class="layui-form-label">属性选项：</label>
    <div class="layui-input-block">

        <div class="layui-card">
            <div class="layui-card-header">属性列表</div>

            <div class="layui-card-body">
                <div class="layui-btn-container tag" lay-filter="speclist" lay-allowclose="true" lay-newTag="true">
                    <!--
                    <button lay-id="11" type="button" class="tag-item tag-item-normal">颜色</button>
                -->
                </div>
            </div>
        </div>

        <div class="layui-card" id="spec-val-list">
            <div class="layui-card-header">属性值</div>

        <script type="text/html" id="attr-block">
            <div class="layui-card-body" lay-filter="attr-con-{{d.id}}" p-name="{{d.text}}">
                <button type="button" name="spec[{{d.id}}]" value="" class="tag-item tag-item-normal layui-btn layui-btn-primary layui-btn-sm">{{d.text}}</button>：

                <div class="layui-btn-container tag" parent-name="{{d.text}}" lay-filter="attr-{{d.id}}-list" lay-allowclose="true" lay-newTag="true" style="display: inline-block;">
                    
                </div>
            </div>
        </script>
        <!--
            <div class="layui-card-body">

                <button attr-id="11" type="button" class="tag-item tag-item-normal layui-btn layui-btn-primary layui-btn-sm">颜色</button>：

                <div class="layui-btn-container tag" lay-filter="attr-11" lay-allowclose="true" lay-newTag="true" style="display: inline-block;">
                    <button lay-id="11" type="button" class="tag-item tag-item-normal">白色</button>
                    <button lay-id="22" type="button" class="tag-item">金色</button>
                    <button lay-id="33" type="button" class="tag-item tag-item-warm">黑色</button>
                </div>
            </div>
        -->
        </div>


    </div>
</div>
<!--form项目end-->


<div class="layui-form-item">
    <label class="layui-form-label">SKU列表：</label>
    <div class="layui-input-block">
        <table class="layui-table"> 
            <thead>
                <tr> 
                    <th><lable name="area">SKU</lable></th>
                    <th><lable name="area">图片</lable></th> 
                    <th><lable name="start_num">价格</lable></th> 
                    <th><lable name="start_price">库存</lable></th> 
                    <th><lable>编号</lable></th>
                </tr>
            </thead>
            <tbody id="skuList">
            <tr>
                <td>
                    
                </td>
                <td>
                    <div class="goods-spec-img-div">
                        <input name="spec_image[]" type="hidden" value=""><img src="/admin/plug/speclist/images/goods-lists-add-image.png" class="goods-spec-img-add">
                    </div>
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_price" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入价格" name="price[]">
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_cost_price" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入成本价" name="cost_price[]">
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_stock" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入库存" name="stock[]">
                </td>
                
            </tr>
            </tbody>
        <script type="text/html" id="skurowtmp">
            <tr>
                <td attr-name="fields">
                    {{d.fields}}
                    <input type="hidden" name="spec_list[]" value="{{d.indexs}}">
                </td>
                <td>
                    <div class="goods-spec-img-div">
                        <input name="spec_image[]" type="hidden" value=""><img src="/admin/plug/speclist/images/goods-lists-add-image.png" class="goods-spec-img-add">
                    </div>
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_price" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入价格" name="price[]">
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_cost_price" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入成本价" name="cost_price[]">
                </td>
                <td>
                    <input type="number" class="layui-input" lay-verify="more_spec_required|more_stock" lay-vertype="tips" autocomplete="off" switch-tab="1" verify-msg="请输入库存" name="stock[]">
                </td>
            </tr>
        </script>
        </table>
        <div class="layui-table-tool-temp"> 
            <button type="button" class="pear-btn pear-btn-primary pear-btn-md" id="addSku"> 
                <i class="layui-icon layui-icon-add-1"></i> 新增 
            </button>
        </div>
    </div>
</div>

<div id="createsku" style="display: none;max-height: 250px; overflow-y: auto; padding: 5px;">
    <!-- sku组合列表 -->
</div>

                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="user-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<style type="text/css">
.layui-upload-img {
    width: 92px;
    height: 92px;
    margin: 0 10px 10px 0;
}
</style>
<script type="text/javascript" charset="utf-8" src="/component/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/component/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/component/ueditor/lang/zh-cn/zh-cn.js"></script>

<script src="/component/layui/layui.all.js"></script>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<!--属性标签-->
<script type="text/javascript">
var spec_names = [];
var spec_values= [];

layui.use(['tag', 'code', 'element','laytpl','layer','form'], function() {
    var $ = layui.jquery,
        tag = layui.tag,
        laytpl = layui.laytpl; //Tag的切换功能，切换事件监听等，需要依赖tag模块
        layui.code();
        tag.render("speclist", {
            skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius', //标签样式
            tagText: '<i class="layui-icon layui-icon-add-1"></i>添加属性' //标签添加按钮提示文本
        });




    var spec_i = 1;
    var layer = layui.layer;
    var form = layui.form;
    /*计算数组arr前i个数相乘*/
    function arrchen(arr,i)
    {
        if(arr.length<i){
            return 0;
        }
        var v = 1;
        for(var x=0;x<=i;x++)
        {
            v=arr[x]*v;
        }
        return v;
    }
    function arrindex(arr,value){
        for(var i in arr){
            if(arr[i]==value){
                return i;
            }
        }
        return -1;
    }
        //红色


    function skulistrender(){
        var getTpl = $('#skurowtmp').html();
        
        var attrs =spec_names;
        var v = 1;
        var value_len = [];
        var yy = [];
        for(var i in spec_names)
        {
            if(!spec_values[i]){
                return false;
            }
            v=spec_values[i].length*v;
            value_len[i] = spec_values[i].length;
            yy[i] = 0;
        }
        $('#skuList').html('');
        var ii = 0;
        var tempi = 0;
        var namei = 0;
        var data = {};
        for(i=0;i<v;i++)
        {
            tempi = i;
            for(ii=spec_names.length-1;ii>=0;ii--)
            {
                min = arrchen(value_len,ii-1);
                index = Math.floor(tempi/min);
                yy[ii] = index;
                tempi = tempi-min*index;
            }
            console.log('yy',yy);

            data.fields = '';
            data.indexs = '';
            for(var x in yy){
                data.fields = data.fields + spec_values[x][yy[x]] +'_'
                data.indexs = data.indexs + yy[x]+'_'
            }
            data.fields = data.fields.replace(/_$/,"");
            data.indexs = data.indexs.replace(/_$/,"");
            laytpl(getTpl).render(data, function(html){
              $('#skuList').append(html);
              //监听tag.add delete 
            });
        }

    }

        tag.on('add(speclist)', function(data) {
            console.log('新增');
            var attrname = $(data.othis).html();
            for(var x in spec_names)
            {
                if(spec_names[x] == attrname )
                {
                    alert('属性已添加');
                    return false;
                }
            }
            spec_names.push(attrname);
            //tag.add('speclist', );
            var getTpl = $('#attr-block').html();
            var id = spec_names.indexOf(attrname);
            laytpl(getTpl).render({text: attrname,id: id}, function(html){
              $('#spec-val-list').append(html);
              tag.render("attr-"+id+'-list');
              var lay_id = "attr-"+id+'-list';
              tag.on('add('+lay_id+')', function(data) {

                    var item = $(data.othis);
                    var attrname = $(data.othis).html();
                    //item.attr('parent-name',id);
                    data.elem.append(item);
                    var pname = item.parent().attr('parent-name');
                    var attr_i = arrindex(spec_names, pname);

                    if(!spec_values[attr_i]){
                        spec_values[attr_i] = [];
                    }
                    spec_values[attr_i].push(attrname);

                    skulistrender();
                    return false;
              })
              tag.on('delete('+lay_id+')', function(data) {
                    console.log(data);
                    var attr_i = data.index;
                    var group_name = data.elem.attr('parent-name');
                    var group_i = arrindex(spec_names,group_name);
                    
                    console.log('attr_i:',attr_i);
                    spec_values[group_i].splice(attr_i,1);
                    console.log('values:',spec_values);
                    console.log('names:',spec_names);
                    //更新列表
                    skulistrender();
              })
              //监听tag.add delete 
            });

            var item = $(data.othis);
            item.attr('lay-id',id);
            data.elem.append(item);
            spec_i++;
            //console.log(this); //当前Tag标签所在的原始DOM元素
            //console.log(data.index); //得到当前Tag的所在下标
            //console.log(data.elem); //得到当前的Tag大容器
            //console.log(data.othis); //得到新增的DOM对象
            return false; //返回false 取消新增操作； 同from表达提交事件。
        });

        tag.on('delete(speclist)', function(data) {
            console.log('删除')
            var attr_i = data.index;
            console.log(spec_names[attr_i]);
            $('[p-name="'+spec_names[attr_i]+'"]').remove();
            console.log('attr_i:',attr_i);
            spec_values.splice(attr_i,1);
            console.log('values:',spec_values);
            spec_names.splice(attr_i,1);
            console.log('names:',spec_names);
            skulistrender();
            
            //console.log(this); //当前Tag标签所在的原始DOM元素
            //console.log(data.index); //得到当前Tag的所在下标
            //console.log(data.elem); //得到当前的Tag大容器
        });
    function updateskulist(){

    }
    $('#addSku').click(function(){
      layer.open({
        type: 1
        ,offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
        ,id: 'layerDemo' //防止重复弹出
        ,content: $('#createsku')
        ,btn: '关闭全部'
        ,btnAlign: 'c' //按钮居中
        ,shade: 0 //不显示遮罩
        ,yes: function(){
          layer.closeAll();
          $('#createsku').hide();
        }
      });
        var el = '<div class="layui-form-item">'+
    '<label class="layui-form-label">选择框</label>'+
    '<div class="layui-input-block">'+
      '<select name="bc944" lay-filter="ss">'+
        '<option value=""></option>'+
        '<option value="0">北京</option>'+
        '<option value="1">上海</option>'+
        '<option value="2">广州</option>'+
      '</select>'+
    '</div>'+
  '</div>';
        $('#createsku').append(el);
        $('#createsku').show();
        form.render();

    })
});
</script>

<script>
var MODULE_PATH = '/{$controller}/';
var modules = [
    'form','jquery','laydate','upload'
];
layui.use(modules,function(){
    let form = layui.form;
    let $ = layui.jquery;
    let laydate = layui.laydate;
    let upload = layui.upload;

    var ue = UE.getEditor('content');
    //常规用法
    laydate.render({
      elem: '#pubdate'
    });
    
    form.on('submit(user-save)', function(data){
        let roleIds = "";

        var fields = data.field;
        fields.spec_values = spec_values;
        fields.spec_names = spec_names;
        console.log(fields);
        //fields = JSON.stringify(fields);

        $.post(MODULE_PATH+'create', fields, function (result) {
            //... your code
        }, "json");
    /*
        $.ajax({
            url:MODULE_PATH+'create',
            data:fields,
            dataType:'json',
            contentType:'application/json',
            type:'post',
            success:function(result){
                if(result.code==1){
                    layer.msg(result.msg,{icon:1,time:1000},function(){
                        parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        parent.layui.table.reload("user-table");
                    });
                }else{
                    layer.msg(result.msg,{icon:2,time:1000});
                }
            }
        })
        */
        
        return false;
    });


    //分类联动
    var categorys = [{"name":"文具","id":1,"pid":0,"level":1},{"name":"专场推荐","id":2,"pid":0,"level":1},{"name":"热门分类","id":3,"pid":0,"level":1},{"name":"晨光","id":4,"pid":1,"level":2},{"name":"小米","id":5,"pid":1,"level":2},{"name":"得力","id":6,"pid":1,"level":2},{"name":"英雄","id":7,"pid":1,"level":2},{"name":"百乐","id":8,"pid":1,"level":2},{"name":"中性笔","id":9,"pid":4,"level":3},{"name":"铅笔","id":10,"pid":4,"level":3},{"name":"小米中性笔","id":11,"pid":5,"level":3},{"name":"小米铅笔","id":12,"pid":5,"level":3},{"name":"得力中性笔","id":13,"pid":6,"level":3},{"name":"英雄钢笔","id":14,"pid":7,"level":3},{"name":"百乐钢笔","id":15,"pid":8,"level":3}];

    setSelectFirst();


    function setSelectFirst(default_id) {
        var category_select_html = '<option value="">请选择分类</option>';
        for (var i in categorys) {
            if (categorys[i]['pid'] == 0) {
                category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
            }
        }
        $('select[name="first_category_id"]').html(category_select_html);
        $('select[name="first_category_id"]').val(default_id);
        form.render('select');
    }
    function setSelectSecond(default_id, pid) {
        pid = pid === undefined ? $('select[name="first_category_id"]').val() : pid;
        $('select[name="second_category_id"]').html('<option value="">请选择分类</option>');
        $('select[name="third_category_id"]').html('<option value="">请选择分类</option>');
        var category_select_html = '<option value="">请选择分类</option>';
        for (var i in categorys) {
            if (categorys[i]['pid'] == pid) {
                category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
            }
        }
        $('select[name="second_category_id"]').html(category_select_html);
        $('select[name="second_category_id"]').val(default_id);
        form.render('select');
    }
    function setSelectThird(default_id, pid) {
        pid = pid === undefined ? $('select[name="second_category_id"]').val() : pid;
        $('select[name="third_category_id"]').html('<option value="">请选择分类</option>');
        var first_category_id = $('select[name="first_category_id"]').val();
        var category_select_html = '<option value="">请选择分类</option>';
        for (var i in categorys) {
            if (categorys[i]['pid'] == pid) {
                category_select_html += '<option value="' + categorys[i]['id'] + '">' + categorys[i]['name'] + '</option>';
            }
        }
        $('select[name="third_category_id"]').html(category_select_html);
        $('select[name="third_category_id"]').val(default_id);
        form.render('select');
    }

    form.on('select(first_category)', function (data) {
        setSelectSecond('', data.value);
    });
    form.on('select(second_category)', function (data) {
        setSelectThird('', data.value);
    });
    //分类结束

    //普通图片上传
    var uploadInst = upload.render({
    elem: '#test1'
    ,url: MODULE_PATH+'upload' //改成您自己的上传接口
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
    });

    //多图片上传
    upload.render({
    elem: '#test2'
    ,url: MODULE_PATH+'upload' //改成您自己的上传接口
    ,multiple: true
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
      });
    }
    ,done: function(res){
      //上传完毕
    }
    });


})


</script>
<script>
</script>
</body>
</html>